<template>
  <Drawer
    placement="right"
    :closable="true"
    v-model="visible"
    width="400"
    scrollable
    @on-close="cancel"
  >
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img
            src="~@/assets/images/icon_Code.jpg"
            class="w-6 h-6"
            alt="Start icon"
          />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">{{ title }}</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">
          编写代码，处理输入变量来生成返回值
        </div>
      </div>
    </template>
    <CommonCollapse title="输入" tip="输入">
      <template #right>
        <Button
          type="primary"
          size="small"
          icon="md-add"
          @click="addInput('inoutlist')"
        ></Button>
      </template>
      <div class="panel-table">
        <div class="panel-table-header">
          <div class="name" style="width: 150px">变量名</div>
          <div class="name">变量值</div>
        </div>
        <div class="panel-table-list">
          <Form ref="formEl" :model="form" label-position="top">
            <div
              class="flex items-center mb-4"
              v-for="(item, index) in form.inoutlist"
              :key="index"
            >
              <div class="panel-table-item" style="width: 160px">
                <FormItem
                  :key="index"
                  :prop="'inoutlist.' + index + '.varname'"
                  :rules="{
                    required: true,
                    message: '变量名不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    v-model="item.varname"
                    placeholder="输入变量名"
                    size="small"
                  />
                </FormItem>
              </div>
              <div
                class="panel-table-item"
                style="width: 100px; margin-right: 0"
              >
                <FormItem>
                  <Select size="small" v-model="item.vartype">
                    <Option
                      v-for="type in BE_TYPE_LIST"
                      :value="type.value"
                      :key="type.value"
                      >{{ type.label }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 180px">
                <FormItem
                  :prop="'inoutlist.' + index + '.varparam'"
                  :rules="{
                    required: true,
                    message: '变量值不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    size="small"
                    v-model="item.varparam"
                    check-strictly
                    placeholder="输入参数值"
                  >
                  </Input>
                </FormItem>
              </div>
              <div
                class="panel-table-item btn"
                @click="removeInput('inoutlist', index)"
              >
                <Icon type="md-remove" />
              </div>
            </div>
          </Form>
        </div>
      </div>
    </CommonCollapse>
    <Divider></Divider>
    <CommonCollapse title="代码">
      <template #right>
        <Button
          @click.stop="showModal = true"
          size="small"
          type="primary"
          icon="md-resize"
          >在IDE中编辑</Button
        >
      </template>
      <div class="w-full h-52">
        <MonacoEditor v-model="form.codeide" :editor-option="{ readOnly: true }" />
      </div>
    </CommonCollapse>
    <Divider></Divider>

    <CommonCollapse title="输出" tip="输出">
      <template #right>
        <Button
          type="primary"
          size="small"
          icon="md-add"
          @click="addInput('outputjsonlist')"
        ></Button>
      </template>
      <div class="panel-table">
        <div class="panel-table-header">
          <div class="name" style="width: 170px">变量名</div>
          <div class="name">变量类型</div>
        </div>
        <div class="panel-table-list">
          <Form ref="formEl" :model="form" label-position="top">
            <template v-for="(item, index) in form.outputjsonlist" :key="index">
              <div class="flex items-center mb-5">
                <div class="panel-table-item" style="width: 180px">
                  <FormItem
                    :key="index"
                    :prop="'outputjsonlist.' + index + '.varname'"
                    :rules="{
                      required: true,
                      message: '变量名不可为空',
                      trigger: 'blur',
                    }"
                  >
                    <Input
                      v-model="item.varname"
                      placeholder="输入变量名"
                      size="small"
                      show-word-limit
                      maxlength="20"
                    />
                  </FormItem>
                </div>
                <div class="panel-table-item" style="width: 120px">
                  <FormItem>
                    <Select size="small" v-model="item.vartype">
                      <Option
                        v-for="type in BE_TYPE_LIST"
                        :value="type.value"
                        :key="type.value"
                        >{{ type.label }}</Option
                      >
                    </Select>
                  </FormItem>
                </div>
                <div class="panel-table-item btn">
                  <Icon type="md-resize" @click="handleShowDesc(index)" />
                </div>
                <div class="panel-table-item btn" @click="removeInput('outputjsonlist', index)">
                  <Icon type="md-remove" />
                </div>
              </div>
              <div class="w-full mt-1" v-show="showDescList.includes(index)">
                <p class="text-xs">描述</p>
                <Input
                  size="small"
                  v-model="item.vardesc"
                  class="w-full mt-1"
                  placeholder="帮助大模型准确了解参数的作用"
                ></Input>
              </div>
            </template>
          </Form>
        </div>
      </div>
    </CommonCollapse>
    <CommonCollapse title="异常处理" tip="可设置异常处理，包括超时、重试、异常处理方式。">
      <CommonAbnormalModule :form="form.excepjsondata" />
    </CommonCollapse>
  </Drawer>
  <Modal v-model="showModal" title="代码" fullscreen footer-hide>
    <div class="w-full! max-w-full! h-full">
      <MonacoEditor v-model="form.codeide" footer-hide />
    </div>
  </Modal>
</template>
<script setup>
import { ref } from 'vue';
import CommonCollapse from '@/components/CommonCollapse/index.vue';
import CommonAbnormalModule from './common-abnormal-module.vue';

import MonacoEditor from '../../monaco-editor.vue';

import { BE_TYPE_LIST } from '../../lib/constant';

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: '代码',
  },
});

const emit = defineEmits(['add', 'remove', 'cancel']);

const visible = ref(false);
const showModal = ref(false);


const showDescList = ref([]);
const handleShowDesc = (i) => {
  if (showDescList.value.includes(i)) {
    const showIndex = showDescList.value.indexOf(i);
    showDescList.value.splice(showIndex, 1);
    return;
  }
  showDescList.value.push(i);
};
// 组件的增删
const addInput = (listKey) => {
  emit('add', listKey);
};
const removeInput = (listKey, index) => {
  emit('remove', listKey, index);
};
const init = () => {
  visible.value = true;
};
const cancel = () => {
  visible.value = false;
  emit('cancel')
};

defineExpose({
  init,
});
</script>
<style lang="scss">
.panel-table-header {
  align-items: center;
  display: flex;
  gap: 4px;
  padding: 0 4px;

  .name {
    width: 120px;
    margin-right: 6px;
    box-sizing: content-box;
  }
  .center {
    text-align: center;
  }
}

:deep(.ivu-form-item-error-tip){
  font-size: 12px;
}
.panel-table-item {
  height: 30px;
  margin-right: 6px;
  &.center {
    text-align: center;
  }
  &.btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-left: 12px;
    height: 22px;
  }
}
</style>
